<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <include file="Include:_cssjs" />
        <script type="text/javascript">
            $(function () {
            });
        </script>
<style>
#mapbar input[type="button"]{background-color: #0D9BF2;height:30px;text-align:center;line-height:30px;color:#fff;font-size:14px;border-radius:3px;outline: none;border:0;cursor:pointer;}
#mapbar input[type="button"].red{background-color:#f00;color:#fff;}
#mapbar input[type="button"].green{background-color:#0f0;color:#fff;}
</style>
    </head>
    <body>
        <div class="wrap">
            <include file="Include:_header" />
            <div class="container clearfix">
                <include file="Include:_left" />
                <div class="right">
                    <div class="tit"><h1>地图总览</h1></div>
                    <!--div class="tx_div">
                        <h2>地图总览</h2>
                        <p>1、当您使用sandbox 沙盒环境开发、调试成功后，如需切换到生产环境，请手动更改Rest API 地址。<br/>
                            2、并点击「上线」系统会尽快迁移您的应用信息移至生产环境，一般这个步骤会很快完成。<br/>
                            3、上线应用需先通过实名制认证<br/>
                        </p>
                    </div-->
                    <div class="div1">
    <!--百度地图容器-->
    <div style="width:1140px;height:900px;border:#ccc solid 1px;font-size:12px;float:left;" id="map"></div>
                    </div>
                </div>
            </div>
            <include file="Include:_footer" />
        </div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F4VxOyGMo84zqM64v4hdXy1t"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<script type="text/javascript">
	var isDianDian = false;
	var pointlist_temp = $('#pointlist_temp');
	var linelist = $('#linelist');
	var overlays = [];

    function addMapOverlay(){

		//加路径
      var plOpts = [
<volist name="list" id="vo2">
        {$vo2.plOpts},
</volist>
      ];
      var plPath = [
<volist name="list" id="vo2">
[
    <volist name="vo2.ext" id="vo">
          new BMap.Point({$vo.lng},{$vo.lat}),
    </volist>
],
</volist>
      ];
      for(var index = 0; index < plOpts.length; index++){
        var polyline = new BMap.Polyline(plPath[index],plOpts[index]);
        map.addOverlay(polyline);
      }
    }

	function addMapDrawingManager(){
		var styleOptions = {
			strokeColor:"red",    //边线颜色。
			fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
			strokeWeight: 3,       //边线的宽度，以像素为单位。
			strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
			fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
			strokeStyle: 'solid' //边线的样式，solid或dashed。
		}
		var overlaycomplete = function(e){
			overlays.push(e.overlay);
			//alert(e.overlay);
			//overlays[0].hide();
			console.log(e.overlay.getPath());
			var _1 = e.overlay.getPath();
			var _2 = [];
			for(var i=0;i<_1.length;i++){
				_2.push(_1[i].lng+','+_1[i].lat);
			}
			pointlist_temp.val(_2.join('\n'));
            //e.overlay.setStrokeColor('blue');
            genLindeList();
		};
		//实例化鼠标绘制工具
		var drawingManager = new BMapLib.DrawingManager(map, {
			isOpen: false, //是否开启绘制模式
			enableDrawingTool: true, //是否显示工具栏
			drawingToolOptions: {
				anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
				offset: new BMap.Size(5, 5), //偏离值
				scale: 1,
				drawingModes: [BMAP_DRAWING_POLYLINE],
			},
			polylineOptions: styleOptions, //线的样式
		});
		 //添加鼠标绘制工具监听事件，用于获取绘制结果
		drawingManager.addEventListener('overlaycomplete', overlaycomplete);
	}
    function clearAll() {
		for(var i = 0; i < overlays.length; i++){
            map.removeOverlay(overlays[i]);
        }
        overlays.length = 0
    }


    function addMapControl_mapop(){
	    ZoomControl.prototype = new BMap.Control();
	    ZoomControl.prototype.initialize = function(map){
	        var div = document.createElement("div");
            div.id="mapbar";
            var btn2 = document.createElement("input");
            btn2.type="button";btn2.value="添加一条新的路径";
            btn2.style.marginLeft='5px';
            btn2.onclick = function(e){
                top.location.href = "{:U('Map/line_add')}";
            }
            div.appendChild(btn2);
	        map.getContainer().appendChild(div);
	        return div;
        }
	    var myZoomCtrl = new ZoomControl();
	    map.addControl(myZoomCtrl);
    }

	function ZoomControl(){
	  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
	  this.defaultOffset = new BMap.Size(40, 10);
	}

	//初始化
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
	  //addMapDrawingManager();
      addMapControl_mapop();
    }
    function createMap(){
      map = new BMap.Map("map");
      map.centerAndZoom(new BMap.Point(117.178852,39.079737),18);
    }
    function setMapEvent(){
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    }
    function addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      scaleControl.setUnit(BMAP_UNIT_METRIC);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:3});
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:false});
      map.addControl(overviewControl);
    }
    var map;
      initMap();


	Array.prototype.remove=function(obj){
		for(var i =0;i <this.length;i++){
			var temp = this[i];
		    if(!isNaN(obj)){ temp=i; }
            if(temp == obj){
                for(var j = i;j <this.length;j++){
                    this[j]=this[j+1];
                }
                this.length = this.length-1;
            }
        }
    }
  </script>
    </body>
</html>